{% load static %}
{#<!DOCTYPE html>#}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'pluigns/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <style>
       html{
             width:100%;
            overflow-x:hidden;
        }
       *{
            padding: 0;
            margin: 0;
        }
        .btn{
            padding: 9px 14px;
        }
        .navbar {
            border-radius: 0px;

        }

        a{
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .navbar-brand {
            padding: 7px 15px;
        }

        .ul1 {
            /* width: 253px; */
            height: 120px;
            /* background-color: red; */
            /* border-right: 1px solid #ccc; */
            /* 从上到下 */
            flex-direction: column;
            display: flex;
        }

        .ul1 li {
            flex: 1;
            /* background-color: salmon; */
            border-bottom: 1px solid #ccc;

        }

        .col-sm-2 {
            width: 14.64%;
            padding-right: 0;
        }

        .col-sm-9 {
            width: 85%;
        }

        .ul1 li {
            display: flex;
            /* 从左往右
            flex-direction: row;           */
        }
        .navbar-nav>li>a{
            line-height: 25px;
        }
        .tom {
            flex: 1;
            /* background-color: blue; */
            display: flex;
        }

        .tom a {
            flex: 1;
            /* background-color: red; */
        }

        .tom .t1 {
            flex: 2;
            /* background-color: aquamarine; */
        }
        .t1{
            /* text-align: center; */

            padding: 12px 0px;
            margin-left: -20px;
            padding-left: 0px;
            color: black;
        }
        .t1:hover{
            text-decoration: none;
            color: blue;
        }
        .chen{
            margin: 15px 10px;
        }
        #li1{
           color: black;
           padding: 12px 0px;
            margin-left: -12px;
            padding-left: 0px;
           text-decoration: none;
        }
        #li1:hover{
             text-decoration: none;
             color: blue;
        }
    </style>
    {% block css %} {% endblock %}
</head>

<body>
    <script src="{% static 'js/jquery-3.5.1.js' %}"></script>
    <script src="{% static 'pluigns/bootstrap-3.4.1/js/bootstrap.min.js' %}"> </script>
    <nav class="navbar navbar-inverse" style="margin-bottom: 0px;">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav" style=" line-height: 57px;">
                    <li>
                        <div class="navbar-brand-wrapper d-flex justify-content-center">
                            <div
                                class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                                <a class="navbar-brand brand-logo" href="#"><img
                                        src="https://majestic.bootmb.com/images/logo.svg" alt="logo"></a>
                            </div>
                        </div>
                    </li>
                    <li><a href="/deant/list/">员工管理系统</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">
                            <img  style="width: 25px;height: 25px;margin:0px 4px;border-radius: 50%;background-color: turquoise;" src="http://127.0.0.1:8000/{{ request.session.image.img }}" alt="">
                              {{ request.session.info.name }}
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/people/list/">个人资料</a></li>
                            <li><a href="#">我的信息</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/logout/">注销</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="row" style="border-bottom:1px solid #ccc;">
        <div class="col-xs-6 col-sm-2">
            <ul class="ul1" >
                <li>
                    <div class="tom">
                        <a href="#" ><span class="glyphicon glyphicon-home" aria-hidden="true"
                                style="padding: 12px 37px ;"></span></a>
                        <a href="/deant/list/" class="t1">部门管理</a>
                    </div>
                </li>
                <li>
                    <div class="tom">
                        <a href="#" ><span class="glyphicon glyphicon-user" aria-hidden="true" style="padding: 12px 37px ;"></span></a>
                        <a href="/deantUser/list/" class="t1">薪资管理</a>
                    </div>
                </li>
                <li>
                    <div class="tom">
                        <a href="/admin/list/"><span class="glyphicon glyphicon-lock" aria-hidden="true" style="padding: 12px 37px ;"></span></a>
                        <a href="/admin/list/" class="t1">管理员账户</a>
                    </div>
                </li>
                <li>
                    <div class="tom">
                        <a href="#"><span class="glyphicon glyphicon-headphones" aria-hidden="true"
                                style="padding: 12px 37px ;"></span></a>
                        <a href="/order/list/" class="t1">员工请假</a>
                    </div>
                </li>
                <li class="dropdown">
                  <a href="#"><span class="glyphicon glyphicon-cloud" aria-hidden="true" style="padding: 12px 37px ;"></span></a>
                  <a href="#" class="dropdown-toggle" id="li1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">文件上传<span class="caret"></span></a>
                  <ul class="dropdown-menu" style="margin:2px 36px 0px">
                    <li><a href="/order/upload/" style="padding: 3px 45px">请假表上传</a></li>
                    <li><a href="#" style="padding: 3px 45px">薪资表上传</a></li>
                  </ul>
                </li>
                <li>
                    <div class="tom">
                        <a href="#"><span class="glyphicon glyphicon-send" aria-hidden="true" style="padding: 12px 37px ;"></span></a>
                        <a href="/travel/list/" class="t1">旅游出行</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-xs-8 col-sm-9" style="border-left:1px solid #ccc ;height:1000px;background: #fff;">
            <div class="chen">
             {% block type %}

             {% endblock %}
            </div>
        </div>
    </div>
    {% block js %} {% endblock %}
</body>

</html>